<template>
  <div class="main">
    <cenTop/>
    <section>
      <div class="mapBox">
        <div id="beijing" style="width: 100%;height:100%;"></div>
      </div>
      <div class="tipsMap">
        <p>车场总计：{{parkingLotNum}}个</p>
        <p>空余车位20%以内</p>
        <p>空余车位20%—40%</p>
        <p>空余车位40%以上</p>
      </div>
    </section>
    <cenBot/>

    <LeftTop/>
    <LeftMid/>
    <LeftBot/>

    <rightTop/>
    <rightMid/>
    <rightBot/>
  </div>
</template>

<script>
import {
  getAllProvinceLive,
  getTotalPayChargeTOP10,
  getAllSpaceChargeMsg
} from "../api/api";
import LeftTop from "../components/LeftTop";
import LeftMid from "../components/LeftMid";
import LeftBot from "../components/LeftBot";

import rightTop from "../components/rightTop";
import rightMid from "../components/rightMid";
import rightBot from "../components/rightBot";

import cenTop from "../components/cenTop";
import cenBot from "../components/cenBot";

export default {
  components: {
    LeftTop,
    LeftMid,
    LeftBot,
    rightTop,
    rightMid,
    rightBot,
    cenTop,
    cenBot
  },
  name: "beijing",
  data() {
    return {
      msg: "1",
      parkingLotNum: ""
    };
  },
  mounted() {
    this.getMapData();
    setInterval(() => {
      console.log(this.msg);
      this.getMapData("3", "9");
    }, 3000);
  },
  methods: {
    winload() {
      window.reload();
    },
    getMapData(symbolSizeSmall, symbolSizeBig) {
      getAllProvinceLive().then(res => {
        console.log(res.data);
        console.log(res.data.length);
        this.parkingLotNum = res.data.length;
        //紧张
        var nervous = new Array();

        // 前端模拟台湾坐标
        // var nervous = [{
        //   name: '台湾',
        //   value: ['121.08802', '24.12807', '紧张']
        // }]
        //适中
        var moderate = new Array();
        //空闲
        var free = new Array();
        res.data.forEach((item, index) => {
          var entity = {};
          entity.name = item.park_name;
          var letAndLong = new Array();
          letAndLong.push(item.latitude);
          letAndLong.push(item.longitude);
          letAndLong.push(item.live);
          entity.value = letAndLong;

          if (item.live == "紧张") {
            console.log("紧张紧张紧张紧张紧张紧张紧张紧张紧张紧张紧张");
            nervous.push(entity);
          } else if (item.live == "适中") {
            console.log("适中适中适中适中适中适中适中适中适中适中适中");
            moderate.push(entity);
          } else if (item.live == "空闲") {
            console.log("空闲空闲空闲空闲空闲空闲空闲空闲空闲空闲空闲");
            free.push(entity);
          }
        });

        console.log(nervous);
        console.log(moderate);
        console.log(free);
        $.get("../../static/beijing.js").then(res => {
          echarts.registerMap("beijing", res);
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById("beijing"));
          var option = {
            geo: {
              map: "beijing",
              show: true,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#ff0000",
                  borderColor: "#25e0e5",
                  shadowColor: "#56c1d3",
                  shadowBlur: 20
                }
              }
            },
            series: [
              {
                type: "map",
                map: "beijing",
                geoIndex: 1,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: true, // 存在legend时显示
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#18b3f0"
                    }
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff"
                    },

                    borderType: "dashed"
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    //区域颜色
                    areaColor: "#101f5a",
                    //身份边框
                    borderColor: "#158fc2",
                    //省份边框宽度
                    borderWidth: 1
                  },
                  emphasis: {
                    //区域颜色
                    areaColor: "#101f5a",
                    //身份边框
                    borderColor: "#158fc2",
                    //省份边框宽度
                    borderWidth: 1
                  }
                }
              },

              {
                name: "紧张",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: nervous,
                symbolSize: symbolSizeBig,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: "#e02737"
                  }
                },
                zlevel: 1
              },
              {
                name: "适中",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: moderate,
                symbolSize: symbolSizeBig,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,

                itemStyle: {
                  normal: {
                    color: "#ffe407"
                  }
                },
                zlevel: 1
              },
              {
                name: "空闲",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: free,
                symbolSize: symbolSizeBig,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: "#61effd"
                  }
                },
                zlevel: 1
              }
            ]
          };
          var option2 = {
            geo: {
              map: "beijing",
              show: true,
              roam: false,

              itemStyle: {
                normal: {
                  areaColor: "#ff0000",
                  borderColor: "#25e0e5",
                  shadowColor: "#56c1d3",
                  shadowBlur: 20
                }
              }
            },
            series: [
              {
                type: "map",
                map: "beijing",
                geoIndex: 1,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: true, // 存在legend时显示
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#18b3f0"
                    }
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff"
                    },

                    borderType: "dashed"
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    //区域颜色
                    areaColor: "#101f5a",
                    //身份边框
                    borderColor: "#158fc2",
                    //省份边框宽度
                    borderWidth: 1
                  },
                  emphasis: {
                    //区域颜色
                    areaColor: "#101f5a",
                    //身份边框
                    borderColor: "#158fc2",
                    //省份边框宽度
                    borderWidth: 1
                  }
                }
              },

              {
                name: "紧张",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: nervous,
                symbolSize: symbolSizeSmall,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: "#e02737"
                  }
                },
                zlevel: 1
              },
              {
                name: "适中",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: moderate,
                symbolSize: symbolSizeSmall,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,

                itemStyle: {
                  normal: {
                    color: "#ffe407"
                  }
                },
                zlevel: 1
              },
              {
                name: "空闲",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: free,
                symbolSize: symbolSizeSmall,
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke"
                },
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: "#61effd"
                  }
                },
                zlevel: 1
              }
            ]
          };

          if (this.msg == "1") {
            myChart.setOption(option);
            this.msg = "2";
          } else {
            myChart.setOption(option2);
            this.msg = "1";
          }
        });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  margin: 0 5.8rem;
}
.mapBox {
  position: absolute;
  left: 5.2rem;
  top: 2.7rem;
  width: 8rem;
  height: 6rem;
  color: #ff0;
  opacity: 1;
}

.tipsMap {
  position: absolute;
  left: 5.5rem;
  top: 2.7rem;
  width: 2rem;
  height: 1.2rem;
  background: url(../assets/pic_map01.png) no-repeat left top;
  padding: 0.25rem 0 0 0.6rem;
}

.tipsMap p {
  color: #18b3f0;
  font-size: 0.14rem;
  text-align: left;
}
.tipsMap p:first-child {
  color: #e6d44f;
  font-size: 0.18rem;
}
</style>
